<template>
	<view class="page-content">
		<f-navbar title="管理员登录" :isShowLeft="false"></f-navbar>
		<view class="login-content">
			<image class="header-logo" src="@/static/images/logo.png"></image>
			<view class="tab-block">
				<u-tabs :list="tabList" :current="tabIndex" lineColor="#138E57" lineWidth="168rpx" lineHeight="4rpx"
					:scrollable="false" :inactiveStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}"
					:activeStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}"
					:itemStyle="{height:'98rpx',padding:'0 6rpx'}" @click="changeTab"></u-tabs>
			</view>
			<view class="login-block">
				<!-- <view class="flex align-center justify-between identity-box">
					<view class="identity-item flex align-center" v-for="(item,index) in identityList" :key="index" @click="checkLoginIdentity(item.value)">
						<view class="check-box flex align-center justify-center">
							<u-icon name="checkmark-circle-fill" color="#138E57" size="36rpx" v-if="form.identity==item.value"></u-icon>
						</view>
						<view>{{item.label}}</view>
					</view>
				</view> -->
				<view v-show="tabIndex == 0">
					<view class="input-item">
						<u-input border="none" color="#000000" fontSize="30rpx" type="number" maxlength="11" placeholder="请输入手机号码"
						 :adjustPosition="false"	placeholderStyle="color:#666668;font-size:30rpx;" v-model="form.phone">
						</u-input>
					</view>
					<view class="input-item">
						<u-input border="none" color="#000000" fontSize="30rpx" placeholder="请输入验证码"  :adjustPosition="false"
							placeholderStyle="color:#666668;font-size:30rpx;" type="number" maxlength="6" v-model="form.code">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" :keep-running="false" startText="发送验证码" changeText="XS" endText="重发验证码"
									unique-key="login"></u-code>
								<view class="codeText" @tap="getCode">{{tips}}</view>
							</template>
						</u-input>
					</view>
				</view>
				<view v-show="tabIndex == 1">
					<view class="input-item">
						<u-input border="none" color="#000000" fontSize="30rpx" placeholder="请输入登录账号"  :adjustPosition="false"
							placeholderStyle="color:#666668;font-size:30rpx;" v-model="form.username">
						</u-input>
					</view>
					<view class="input-item">
						<u-input border="none" color="#000000" placeholder="请输入登录密码"  :adjustPosition="false"
							placeholderStyle="color:#666668;font-size:30rpx;" password maxlength="20" v-model="form.password">
						</u-input>
					</view>
				</view>
				<view class="login-btn">
					<u-button color="linear-gradient(83deg, #48B453 0%, #2C9F79 100%)"
						:customStyle="{width:'635rpx',height:'100rpx',fontSize:'34rpx',borderRadius:'50rpx',fontWeight:'bold'}"
						@click="login">登 录
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		loginApp,
		sendPhoneCode
	} from '@/api/login.js'
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					name: '验证码登录',
					value: 1,
				}, {
					name: '密码登录',
					value: 2,
				}],
				tips: ``,
				form: {
					phone: null,
					username: null,
					password: null,
					code: null,
					loginType: null,
					// identity: 4
				},
				identityList: [{
					label: '回收站',
					value: 4
				}, {
					label: '中转站',
					value: 5
				}, {
					label: '分拣中心',
					value: 6
				}]
			}
		},
		onLoad() {

		},
		methods: {
			changeTab(e) {
				this.tabIndex = e.index
			},
			checkLoginIdentity(value){
				this.form.identity=value
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (uni.$u.test.mobile(this.form.phone)) {
					if (this.$refs.uCode.canGetCode) {
						sendPhoneCode({
							phone: this.form.phone,
							codeType: 2
						}).then(res => {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast('请输入正确的手机号码');
				}
			},
			login() {
				if (this.tabIndex == 0) {
					if (!this.form.phone) {
						uni.$u.toast('请输入手机号码');
					} else if (!uni.$u.test.mobile(this.form.phone)) {
						uni.$u.toast('请输入正确的手机号码');
					} else if (!this.form.code) {
						uni.$u.toast('请输入验证码');
					} else {
						this.handleLogin()
					}
				} else if (this.tabIndex == 1) {
					if (!this.form.username) {
						uni.$u.toast('请输入登录账号');
					} else if (!this.form.password) {
						uni.$u.toast('请输入登录密码');
					} else {
						this.handleLogin()
					}
				}
			},
			handleLogin() {
				loginApp({
					...this.form,
					username: this.tabIndex == 0 ? this.form.phone : this.form.username,
					loginType: this.tabIndex == 0 ? '01' : '00'
				}).then(res => {
					if (res.token) {
						uni.setStorageSync('token', res.token)
						this.$store.dispatch("actionGetUserInfo").then((res) => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						})
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.page-content {
		height: 100vh;

		.login-content {
			margin-top: 100rpx;
			width: 100%;

			.header-logo {
				display: block;
				width: 476rpx;
				height: 188rpx;
				margin: 0 auto;
			}

			.tab-block {
				width: 635rpx;
				margin: 88rpx auto 0;
			}

			.login-block {
				width: 635rpx;
				margin: 66rpx auto 0;
         .identity-box{
					 padding: 0 20rpx 50rpx;
					 font-size: 30rpx;
					 .check-box{
						 width: 32rpx;
						 height: 32rpx;
						 border: 2rpx solid #EFEFEF;
						 margin-right: 16rpx;
						 border-radius: 50rpx;
					 }
				 }
				.input-item {
					padding: 0 42rpx;
					height: 96rpx;
					font-size: 32rpx;
					background: #F7F7F7;
					display: flex;
					align-items: center;
					border-radius: 50rpx;
					margin-bottom: 42rpx;

					.codeText {
						font-size: 30rpx;
						color: #138E57;
						margin-bottom: 6rpx;
					}
				}

				.login-btn {
					margin-top: 106rpx;
				}
			}

		}
	}
</style>